<template>
  <view>
    <van-tabbar :active="active" placeholder>
      <van-tabbar-item
        v-for="(item, i) in tabBarList"
        :key="item.name"
        :text="item.text"
        @click="handTab(item)"
        active-color="#144E99"
      >
        <template #icon>
          <image
            :src="item.iconPath"
            mode="aspectFit"
            style="width: 30px; height: 18px"
          />
        </template>
        <template #icon-active>
          <image
            :src="item.selectedIconPath"
            mode="aspectFit"
            style="width: 30px; height: 18px"
          />
        </template>
        {{ item.text }}
      </van-tabbar-item>
    </van-tabbar>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { usePageStore } from "@/stores";

const props = defineProps({
  currentTab: {
    type: String,
    default: "index",
  },
});

const pageStore = usePageStore();
console.log(pageStore);
const tabBarList = computed(() => pageStore.tabBarList);

const active = computed(() =>
  tabBarList.value.findIndex((item) => item.name === props.currentTab)
);

const handTab = (row) => {
  uni.switchTab({
    url: row.pagePath,
  });
};
</script>

<style lang="scss">
.bar_img {
  width: 45rpx;
  height: 45rpx;
}
</style>
